@use "./comm.scss" as comm;
@use "./config-dark.scss" as dark;
:root {
  --x-max-width: 1680px;
  --x-radius: 0.5rem;
  --x-fg: hsl(0, 0%, 20%);
  --x-bg: hsl(0, 0%, 97%);
  --x-text-font-family: Verdana, Geneva, Tahoma, sans-serif;
  --x-code-font-family: monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";

  --x-app-border-color: var(--x-fg);
  --x-app-bg: var(--x-bg);

  // star me
  --x-star-me-fg: var(--x-bg);
  --x-star-me-bg: var(--x-fg);
  --x-star-me-hover-fg: hsl(0, 0%, 100%);
  --x-star-me-hover-bg: var(--x-fg);
  --x-star-me-border-color: linear-gradient(90deg, transparent, hsl(0, 0%, 100%), transparent);
  // alert
  --x-status-ok-fg: hsl(0, 0%, 100%);
  --x-status-ok-bg: linear-gradient(hsl(120, 100%, 30%), hsl(120, 100%, 45%));
  --x-status-error-fg: hsl(0, 0%, 100%);
  --x-status-error-bg: linear-gradient(hsl(0, 0%, 50%), hsl(0, 0%, 73%));
  // progress
  // network stats

  // network node
  --x-network-node-fg: var(--x-fg);
  --x-network-node-bg: hsla(132, 4%, 23%, 0.1);
  --x-network-node-border-color: var(--x-card-split-color);
  --x-network-node-row-bg: linear-gradient(to right, transparent, hsla(0, 0%, 100%, 0.5), transparent);

  // sys load

  // toast
}
@include comm.comm();
@include dark.config();
